import React from 'react'
import { connect } from 'react-redux'
import classnames from 'classnames'
import { NavLink } from 'react-router-dom'
import ConfrimDialog from '../ConfirmDialog'
import './style.less'

const mapStateToProps = (state) => {
  return {
    userInfo: state.app.userInfo,
    currentGroup: state.group.currentGroup,
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    openModal: msg => dispatch(global.allActions.groupActions.openModal(msg))
  }
}

class List extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      showConfirm: false,
      tip: '',
      memberList: []
    }
  }
  
  public componentDidMount() {
    this.queryMembers()
  }

  queryMembers() {
    const url = `${config.pre}/crowd/relation/${Cookies.get('areaCode')}/order`
    const opt = { method: 'GET' }
    const query = {
      crowdId: this.props.currentGroup.id,
      offset: 0,
      limit: 200
    }
    console.log(opt);
    fetchJson(url, opt, query).then(data => {
      console.log(data)
      if (data.result) {
        return
      }
      this.setState({memberList: data.data.dataList})
    })
  }

  private currentDelMember = null

  kickout(member) {
    this.currentDelMember = member
    const tip = `确定删除玩家 ${member.nickname} ?`
    this.setState({showConfirm: true, tip})
  }

  delMember() {
    console.log('del', this.currentDelMember)
    const url = `${config.pre}/crowd/relation/${Cookies.get('areaCode')}/${this.props.currentGroup.id}/${this.currentDelMember.uid}`
    const opt = { method: 'DELETE' }
    fetchJson(url, opt).then(data => {
      console.log(data)
      this.props.openModal(data.message)
      if (data.result) {
        return
      }
      this.queryMembers()
      this.setState({showConfirm: false})
    })
  }

  public render() {
    const {currentGroup} = this.props
    const {showConfirm, tip, memberList} = this.state
    const isMineGroup = this.props.currentGroup.owner === 1
    return <div className="view-page group-view">
      <div className="pure-g inner-header">
        <div className="pure-u-1-3 vh-center inner-tab active">
          <span>成员</span>
        </div>
        <div onClick={() => {window.location.hash = 'GroupRuleResult'}} className="pure-u-1-3 vh-center inner-tab">
          <span>战绩</span>
        </div>
        <div onClick={() => {window.location.hash = 'Inner'}} className="pure-u-1-3 vh-center inner-tab">
          <span>房间</span>
        </div>
      </div>
      <div className="inner-body v-scroll">
        {
          currentGroup.owner === 1 ? <div className="member-list-header v-center add-top" onClick={() => {window.location.hash = 'InvitePlayer'}}>
            <div className="v-center mlr-5">
              <img className="add-member-mark" src="img/groupNew/add-green.png" alt=""></img>
              <span className="mlr-5 ft-12">添加俱乐部成员</span>
            </div>
            <img className="add-rule-arrow" src="img/groupNew/ARROW.png" alt=""></img>
          </div> : null
        }
        {
          memberList.map(member => {
            const {lftid, headUrl, nickname, manager} = member
            return <div key={lftid} className="group-item pure-g member-list-item v-center">
              <div className="pure-u-5-24 vh-center">
                <img className="group-new-header" src={headUrl} alt="群头像" />
              </div>
              <div className="pure-u-14-24 h-center column member-middle-info">
                <p className="group-name">{nickname}</p>
                <p className="group-number gery">ID: {lftid}</p>
              </div>
              <div className="pure-u-5-24 vh-center">
                {
                  manager ? '群主' : isMineGroup ? <img onClick={this.kickout.bind(this, member)} className="tichu" src="img/groupNew/tichu.png" alt=""/> : null
                }
              </div>
            </div>
          })
        }
      </div>
      <div className="inner-bottom">
          <div className="text vh-center"><span>俱乐部成员</span></div>
          <NavLink to="/GroupPlay"><img className="back" src="img/app/back.png" alt="" /></NavLink>
      </div>
      {
        showConfirm ? <ConfrimDialog modalContent={tip} confirm={this.delMember.bind(this)} close={() => this.setState({showConfirm: false})}></ConfrimDialog> : null
      }
    </div>
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(List)